import type { FormProps } from 'antd';
import { Button, Form, Input, Row, Col } from 'antd';
import { SearchOutlined, PlusOutlined, RedoOutlined } from '@ant-design/icons';
import { useEffect } from 'react';
import './banner.sass'
type FieldType = {
    bannername?: string;
};

const SearchForm = (props: any) => {
    const [form] = Form.useForm();
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        props.SumbitSearch(values.bannername);
    };
    const onReset = () => {
        form.resetFields();
        onFinish(form.getFieldsValue())
    };

    //新增轮播图弹窗
    const addBannerModal = () => {
        // 弹窗显示
        props.SumbitAdd(true)
    }
    useEffect(() => {
        form.setFieldsValue({
            bannername: ''
        })
    }, [])
    return (
        <>
            <Form
                name="basic"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                onFinish={onFinish}
                autoComplete="off"
                form={form}
            >
                <Row gutter={24}>
                    <Col span={12}>
                        <Form.Item<FieldType>
                            label="轮播图名称"
                            name="bannername"
                        >
                            <Input />
                        </Form.Item></Col>
                    <Col span={12}>
                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                <SearchOutlined />  搜索
                            </Button>
                            <Button className='banner_button' onClick={onReset}>
                                <RedoOutlined />重置
                            </Button>
                            <Button className='banner_button' type="primary" onClick={addBannerModal}>
                                <PlusOutlined />  新增轮播图
                            </Button>
                        </Form.Item></Col>
                </Row>
            </Form>
        </>
    )
}
export default SearchForm;